<template>
  <div class="approval-container">
    <div class="approval-header">
      <h2>报名审批</h2>
      <div class="filter-section">
        <div class="filter-item">
          <label>请选择姓名</label>
          <input type="text" placeholder="输入姓名" v-model="filters.name">
        </div>
        <div class="filter-item">
          <label>所属单位</label>
          <input type="text" placeholder="输入所属单位" v-model="filters.unit">
        </div>
        <div class="filter-item">
          <label>不同层级名</label>
          <input type="text" placeholder="输入层级名" v-model="filters.level">
        </div>
      </div>
    </div>

    <div class="approval-table">
      <table>
        <thead>
        <tr>
          <th>序号</th>
          <th>报名人</th>
          <th>工号</th>
          <th>监考批次</th>
          <th>身份证号校区</th>
          <th>上传材料</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in filteredItems" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.workId }}</td>
          <td>{{ item.examBatch }}</td>
          <td>{{ item.campus }}</td>
          <td>
            <button class="preview-btn" @click="viewMaterial(item)">
              预览
            </button>
          </td>
          <td>
            <button class="action-btn approve" @click="approveItem(item)">通过</button>
            <button class="action-btn reject" @click="rejectItem(item)">驳回</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 预览弹窗 -->
    <div v-if="previewVisible" class="preview-modal">
      <div class="preview-content">
        <div class="preview-header">
          <h3>报名表预览</h3>
          <button class="close-btn" @click="closePreview">×</button>
        </div>
        <div class="preview-body">
          <p><strong>报名人:</strong> {{ selectedItem?.name }}</p>
          <p><strong>工号:</strong> {{ selectedItem?.workId }}</p>
          <p><strong>监考批次:</strong> {{ selectedItem?.examBatch }}</p>
          <p><strong>校区:</strong> {{ selectedItem?.campus }}</p>
          <div class="material-preview">
            <div class="material-item">身份证正面.jpg</div>
            <div class="material-item">教师资格证.pdf</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增确认弹窗 -->
  <div v-if="confirmVisible" class="confirm-modal">
    <div class="confirm-content">
      <div class="confirm-header">
        <h3>{{ confirmTitle }}</h3>
        <button class="close-btn" @click="cancelConfirm">×</button>
      </div>
      <div class="confirm-body">
        <p>{{ confirmMessage }}</p>
      </div>
      <div class="confirm-footer">
        <button class="cancel-btn" @click="cancelConfirm">取消</button>
        <button class="confirm-btn" @click="executeConfirm">确认</button>
      </div>
    </div>
  </div>



</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue';




interface ApprovalItem {
  id: number;
  name: string;
  workId: string;
  examBatch: string;
  campus: string;
}

const items = ref<ApprovalItem[]>([
  { id: 1, name: 'QIANJIAXIN', workId: '10001', examBatch: '2023年4月2023监考报名', campus: '南湖校区' },
  { id: 2, name: 'QIANJIAXIN', workId: '10001', examBatch: '2023年4月2023监考报名', campus: '南湖校区' },
  { id: 3, name: 'QIANJIAXIN', workId: '10001', examBatch: '2023年4月2023监考报名', campus: '余家头校区' },
  { id: 4, name: 'QIANJIAXIN', workId: '10001', examBatch: '2023年4月2023监考报名', campus: '余家头校区' }
]);

const filters = reactive({
  name: '',
  unit: '',
  level: ''
});

const previewVisible = ref(false);
const selectedItem = ref<ApprovalItem | null>(null);




const filteredItems = computed(() => {
  return items.value.filter(item => {
    return (
        (!filters.name || item.name.includes(filters.name)) &&
        (!filters.unit || item.campus.includes(filters.unit)) &&
        (!filters.level || item.examBatch.includes(filters.level))
    );
  });
});

function previewMaterials(item: ApprovalItem) {
  selectedItem.value = item;
  previewVisible.value = true;
}

function closePreview() {
  previewVisible.value = false;
}



const confirmVisible = ref(false);
const confirmTitle = ref('');
const confirmMessage = ref('');
const confirmType = ref(''); // 'approve' 或 'reject'
const confirmItem = ref<ApprovalItem | null>(null);

function approveItem(item: ApprovalItem) {
  confirmTitle.value = '同意报名';
  confirmMessage.value = `是否同意 ${item.name} 的报名审批？`;
  confirmType.value = 'approve';
  confirmItem.value = item;
  confirmVisible.value = true;
}

function rejectItem(item: ApprovalItem) {
  confirmTitle.value = '不同意报名';
  confirmMessage.value = `确认不同意 ${item.name} 的审批。若确认不同意请移步报名失败页面填写原因`;
  confirmType.value = 'reject';
  confirmItem.value = item;
  confirmVisible.value = true;
}

function executeConfirm() {
  if (!confirmItem.value) return;

  if (confirmType.value === 'approve') {
    items.value = items.value.filter(i => i.id !== confirmItem.value!.id);
    alert(`已通过 ${confirmItem.value.name} 的报名申请`);
  } else {
    items.value = items.value.filter(i => i.id !== confirmItem.value!.id);
    alert(`已驳回 ${confirmItem.value.name} 的报名申请，请移步报名失败页面填写原因`);
  }

  closeConfirm();
}

function cancelConfirm() {
  closeConfirm();
}

function closeConfirm() {
  confirmVisible.value = false;
  confirmItem.value = null;
}

import { useRouter } from 'vue-router';

const router = useRouter();

function viewMaterial(item: any) {
  // 在实际应用中，这里应该使用真实的材料ID
  const materialId = 'example-material-id';
  router.push(`/dashboard2/material/${materialId}`);
}

</script>

<style scoped>
.approval-container {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.approval-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
}

.approval-header h2 {
  margin: 0 0 15px 0;
  color: #1a2b4b;
  font-size: 20px;
  font-weight: 600;
}

.filter-section {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.filter-item {
  flex: 1;
}

.filter-item label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
}

.filter-item input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.approval-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: center;
  border: 1px solid #ebeef5;
}

th {
  background-color: #f5f7fa;
  color: #1a2b4b;
  font-weight: 600;
}

tbody tr:hover {
  background-color: #f5f7fa;
}

.preview-btn, .action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.preview-btn {
  background-color: #e6f7ff;
  color: #1890ff;
}

.preview-btn:hover {
  background-color: #bae7ff;
}

.action-btn {
  margin: 0 3px;
}

.approve {
  background-color: #f6ffed;
  color: #52c41a;
}

.approve:hover {
  background-color: #d9f7be;
}

.reject {
  background-color: #fff1f0;
  color: #f5222d;
}

.reject:hover {
  background-color: #ffccc7;
}

/* 预览弹窗样式 */
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.preview-content {
  width: 500px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eaeaea;
}

.preview-header h3 {
  margin: 0;
  color: #1a2b4b;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.preview-body {
  padding: 20px;
}

.preview-body p {
  margin: 10px 0;
}

.material-preview {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8fafc;
  border-radius: 4px;
}

.material-item {
  padding: 8px;
  margin: 5px 0;
  background-color: white;
  border: 1px solid #eaeaea;
  border-radius: 4px;
}

/* 新增确认弹窗样式 */
.confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-content {
  width: 450px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.confirm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eaeaea;
}

.confirm-header h3 {
  margin: 0;
  color: #1a2b4b;
  font-size: 18px;
}

.confirm-body {
  padding: 20px;
  min-height: 80px;
  display: flex;
  align-items: center;
}

.confirm-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.confirm-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
  border-top: 1px solid #eaeaea;
  gap: 10px;
}

.confirm-footer button {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #606266;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.confirm-btn {
  background-color: #1a3a6c;
  color: white;
}

.confirm-btn:hover {
  background-color: #0d2a5c;
}


</style>